<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OUIF : Flexible Image Column List</title>
<link rel="stylesheet" type="text/css" href="cListiFlexible.css"/>
</head>
<body>
<h1>Flexible Image+Text Col List</h1>
<div class="cListiFlexible">
	<ul>
		<li>
			<a href="#"><span class="thumb"><img src="@thumbHr.jpg" alt="" /> <em>Category</em></span> <strong>이미지 제목</strong></a>
			<p>2010-12-24</p>
		</li>
		<li>
			<a href="#"><span class="thumb"><img src="@thumbVr.jpg" alt="" /> <em>카테고리</em></span> <strong>이미지 제목 이미지 제목 이미지 제목</strong></a>
			<p>2010-12-24</p>
		</li>
		<li>
			<a href="#"><span class="thumb"><img src="@thumbSquare.jpg" alt="" /> <em>Category</em></span> <strong>이미지 제목</strong></a>
			<p>2010-12-24</p>
		</li>
		<li>
			<a href="#"><span class="thumb"><img src="@thumbHr.jpg" alt="" /> <em>Category</em></span> <strong>이미지 제목</strong></a>
			<p>2010-12-24</p>
		</li>
		<li>
			<a href="#"><span class="thumb"><img src="@thumbVr.jpg" alt="" /> <em>Category</em></span> <strong>이미지 제목</strong></a>
			<p>2010-12-24</p>
		</li>
		<li>
			<a href="#"><span class="thumb"><img src="@thumbSquare.jpg" alt="" /> <em>Category</em></span> <strong>이미지 제목</strong></a>
			<p>2010-12-24</p>
		</li>
		<li>
			<a href="#"><span class="thumb"><img src="@thumbHr.jpg" alt="" /> <em>Category</em></span> <strong>이미지 제목</strong></a>
			<p>2010-12-24</p>
		</li>
		<li>
			<a href="#"><span class="thumb"><img src="@thumbVr.jpg" alt="" /> <em>Category</em></span> <strong>이미지 제목</strong></a>
			<p>2010-12-24</p>
		</li>
		<li>
			<a href="#"><span class="thumb"><img src="@thumbVr.jpg" alt="" /> <em>Category</em></span> <strong>이미지 제목</strong></a>
			<p>2010-12-24</p>
		</li>
		<li>
			<a href="#"><span class="thumb">No Images <em>Category</em></span> <strong>이미지 제목</strong></a>
			<p>2010-12-24</p>
		</li>
	</ul>
</div>
<br />
<button type="button" onclick="$('.cListiFlexible').attr('class','fixed')">CSS(X)</button>
<button type="button" onclick="$('.fixed').attr('class','cListiFlexible')">CSS(O)</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
